<template>
	<div class="yp_myOrderform">
		<div class="yp_myOrderform_top">
			<h3>个人资料</h3>
		</div>
		<ul class="yp_myMeans_ul">
			<li>
				<span class="yp_name">
					当前头像:
			    </span>
			    <img src="../assets/oneCenter01.png"/>
			    <input type="file">
			    <a href="###">修改</a>
			</li>
			<li>
				<span class="yp_name">昵称:</span>
				<input type="text" style="width: 300px;height: 30px;font-size: 18px;" />
			</li>
			<li>
				<span class="yp_name">性别:</span>
				<input type="radio" name="gender" />男
				<input type="radio" name="gender" style="margin-left: 30px;" />女
			</li>
			<li>
				<span class="yp_name">生日:</span>
				<select name="birthday_year" >
					<option value="1990">1990</option>
					<option value="1991">1991</option>
					<option value="1992">1992</option>
					<option value="1993">1993</option>
					<option value="1994">1994</option>
					<option value="1995">1995</option>
					<option value="1996">1996</option>
					<option value="1997">1997</option>
					<option value="1998">1998</option>
					<option value="1999">1999</option>
				</select>年
				<select name="birthday_math" >
					<option value="01">01</option>
					<option value="02">02</option>
					<option value="03">03</option>
					<option value="04">04</option>
					<option value="05">05</option>
					<option value="06">06</option>
					<option value="07">07</option>
					<option value="08">08</option>
					<option value="09">09</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
				</select>月
				<select name="birthday_day" >
					<option value="01">01</option>
					<option value="02">02</option>
					<option value="03">03</option>
					<option value="04">04</option>
					<option value="05">05</option>
					<option value="06">06</option>
					<option value="07">07</option>
					<option value="08">08</option>
					<option value="09">09</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
				</select>日
			</li>
			<li>
				<span class="yp_name">手机:</span>
				<input type="text" id="yp_person_input" />
				<span style="color: #4B943D;">更换手机</span>
			</li>
			<li><button>确认提交</button></li>
		</ul>
		</div>
</template>

<script>
	export default {
		name: "PersonalData",
		data() {
			return {
				str: "nihao"
			}
		}
	}
</script>

<style scoped>
	.yp_myOrderform{
		width: 1085px;
		height: 609px;
		float: right;
		border: 1px solid gainsboro;
	}
	.yp_myOrderform_top{
		height: 61px;
		line-height: 61px;
		border-bottom: 1px solid gainsboro;
		padding-left: 20px;
	}
	#yp_person_input{
		width: 300px;
		height: 30px;
		font-size: 18px;
	}
	.yp_myOrderform_top+h4{
		width: 120px;
		line-height: 50px;
		padding-left: 20px;
	}
	.yp_myMeans_ul{
		margin-top: 50px;
	}
	.yp_myMeans_ul li{
		height: 70px;
		padding-left: 50px;
	}
	.yp_myMeans_ul li:nth-child(1){
		height: 100px;
		margin-bottom: 30px;
		position: relative;
	}
	.yp_myMeans_ul li:nth-child(1) img{
		width: 100px;
		margin-left: 100px;
	}
	.yp_myMeans_ul li:nth-child(1) span{
		position: absolute;
		top: 40px;
		margin-bottom: 30px;
	}
	.yp_myMeans_ul li span{
		font-size: 18px;
	}
	.yp_myMeans_ul li select{
		width: 80px;height: 30px;font-size: 18px;
	}
	.yp_myMeans_ul li:nth-child(1) a{
		position: absolute;
		top: 40px;
		left: 250px;
		color: #498E3D;
		font-size: 20px;
	}
	.yp_myMeans_ul li:nth-child(1) input{
		position: absolute;
		top: 42px;
		left: 250px;
		opacity: 0;
	}
	.yp_myMeans_ul li:last-child button{
		width: 200px;
		height: 50px;
		font-size: 18px;
		background-color: orange;
		color: white;
		margin-left: 100px;
	}
</style>